<template>
	<view>
			<view class="u-page">
				<!-- 顶部的广告 -->
				<view class="top-ad">
<!-- 					<u-swiper keyName="image" :list="topAd" :indicator="topAd.length > 1" indicatorMode="line" circular
					imgMode="aspectFill" height="100%"></u-swiper> -->
					
					<swiper class="swiper" :indicator-dots="topAd.length > 1" autoplay>
						<swiper-item v-for="(item, index) in topAd" :key="index">
							<image class="" :src="getFmtImage(item.image)" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>

				<!-- 通用功能 -->
				<view class="commonMenus" v-if="menuConfigs">
					<view class="buttom" v-for="(item, index) in menuConfigs.commonMenus" :key="index" @click.prevent.stop="parseMenuButtonClick(item)">
						<view class="logo" :style="item.style">
							<image class="icon" :src="getFmtImage(item.icon)" mode=""></image>
						</view>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
				
				<!-- 功能区 -->
				<view v-if="menuConfigs">
					<view class="extMenus" v-for="(group, groupIndex) in menuConfigs.extMenus" :key="groupIndex">
						<view class="group-name">{{group.groupName}}</view>
						<view class="list">
							<view class="buttom" v-for="(item, index) in group.list" :key="index" @click.prevent.stop="parseMenuButtonClick(item)">
								<view class="logo" :style="item.style">
									<image class="icon" :src="getFmtImage(item.icon)" mode="aspectFit"></image>
								</view>
								<view class="name">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 文章区域 -->
				<view class="indexColumns" v-if="contentTabIndex != -1">					
				  <u-sticky bgColor="#fff" zIndex="1">
					  <u-tabs :list="contents" keyName="columnName" :current="contentTabIndex"
							@click="onContentTabClick"
							:activeStyle="{ color: '#4a4a4a', 'font-size': '17px', 'font-weight': 'bold'}"
							:inactiveStyle="{ color: '#8994a9', 'font-size': '17px'}"
						></u-tabs>
					</u-sticky>
					<view class="contentList" v-if="contents[contentTabIndex] && contents[contentTabIndex].list">
						<view class="contentItem" v-for="(item, index) in contents[contentTabIndex].list" :key="index">
							<view class="pic" v-if="item.pic">
								<image :src="item.pic" mode="aspectFill"></image>
							</view>
							<view class="detail">
								<view class="title">{{item.name}}</view>
								<view class="date">{{item.date}}</view>
							</view>
						</view>
					</view>
				</view>
				
				<u-gap height="70" bgColor="transparent"></u-gap>
				
			</view>
			<mytabbar></mytabbar>
	</view>
</template>

<script>
	import mytabbar from '@/components/tabbar/index.vue';
	import sceneMixins from '@/utils/sceneMixins';
	import {mapState, mapMutations} from 'vuex';	
	export default {
		mixins: [sceneMixins],
		components: {mytabbar: mytabbar},
		data() {
			return {
				topAd: [],
				contentTabIndex: -1,
				contents: []
			}
		},
		computed: {
			...mapState(['menuConfigs', 'userInfo'])
		},
		onShow () {
			var vm = this;
			vm.$jg.judge('login').then(() => {
				vm.waitVariable('userInfo').then(v => {
					vm.getSpaceConfig().then(data => {
						var spaceName = data.spaceName;
						uni.setNavigationBarTitle({ title: spaceName });
						
						// 设置广告区
						vm.topAd = data.topAd.length == 0 ? [{"image": "/static/imgs/banner.png"}] : data.topAd;
						// 设置文章区域
						vm.contents = data.contents;
						vm.loadContents();
					});
				});
			});
			
		},
		onLoad () {
			// #ifdef MP-WEIXIN
				wx.showShareMenu({
					withShareTicket: true,
					menus: ["shareAppMessage","shareTimeline"]
				});
			// #endif
		},
		options: { styleIsolation: 'shared' },
		methods: {
			loadContents: function () {
				var vm = this;
				vm.contents.forEach((n, i) => {
					vm.getAndLoad('获取文章列表', '?columnName=' + n.columnName, (res) => {
						n.list = res.data;
						if (i == 0) {
							vm.contentTabIndex = 0;
						}
					});
				});
			},
			onContentTabClick: function (v) {
				this.contentTabIndex = v.index;
			},
			onGotUserInfo: function (e) {
				uni.getUserProfile({
					desc: '获取微信用户基本信息',
					success: function(infoRes) {
						uni.$u.toast(infoRes.userInfo.nickName);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.top-ad {
	height: 176rpx;
	margin: 20rpx 30rpx;
	/deep/ .u-swiper {
		height: 176rpx !important;
	}
	.swiper {
		height: 176rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.commonMenus {
    display: flex;
    flex-wrap: wrap;
    margin: 30rpx;
		justify-content: space-around;
		.buttom {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.name {
				font-size: 26rpx;
				white-space: nowrap;
			}
			.logo {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 10rpx;
				.icon {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
	.extMenus {
		margin: 0 30rpx 30rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 20rpx;
		.group-name {
			font-size: 34rpx;
			margin-bottom: 30rpx;
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			.buttom {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 30rpx;
				.name {
					font-size: 26rpx;
					white-space: nowrap;
				}
				.logo {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 10rpx;
					.icon {
						width: 53rpx;
						height: 53rpx;
					}
				}
			}
		}
	}
	.indexColumns {
		margin: 0 30rpx 30rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 20rpx;
		.contentList {
			.contentItem {
				margin: 20rpx;
				display: flex;
				.pic {
					image {
						width: 198rpx;
						height: 132rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
				}
				.detail {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title {
						color: $lw_text_2;
						font-size: 28rpx;
						word-wrap: break-word;
						word-break: break-all;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.date {
						color: $lw_text_3;
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>
